<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useRouterPush } from '@/hooks/common/router';
import { usePersistentCountdown } from '@/hooks/business/use-persistent-countdown';
import EmailStep from './components/EmailStep.vue';
import CodeStep from './components/CodeStep.vue';
import PasswordStep from './components/PasswordStep.vue';

const { routerPush } = useRouterPush();
const route = useRoute();
const currentStep = ref<number>(1);
const email = ref<string>((route.query.email as string) || '');
const verifyCode = ref<string>('');

const { startCountdown } = usePersistentCountdown('reset-password-verification-code');

const handleEmailVerified = (verifiedEmail: string) => {
  email.value = verifiedEmail;
  currentStep.value = 2;
  startCountdown();
};

const handleCodeVerified = (code: string) => {
  verifyCode.value = code;
  currentStep.value = 3;
};

const handleResendCode = async () => {
  // 调用重新发送验证码的API
  startCountdown();
};

const handleResetSuccess = (resetEmail: string) => {
  routerPush({
    name: 'login',
    query: {
      email: resetEmail,
      focus: 'password'
    }
  });
};
</script>

<template>
  <div class="min-h-screen flex items-center justify-center from-gray-50 to-gray-100 bg-gradient-to-br px-4 py-12">
    <NCard class="max-w-md w-full">
      <div class="text-center">
        <h2 class="mb-6 text-3xl font-bold">{{ $t('page.resetPassword.title') }}</h2>
        <NSpace justify="center" class="mb-8">
          <div v-for="step in 3" :key="step" class="flex items-center">
            <div
              class="h-8 w-8 flex items-center justify-center rounded-full text-sm"
              :class="[currentStep >= step ? 'bg-primary text-white' : 'bg-gray-200 text-gray-600']"
            >
              {{ step }}
            </div>
            <div v-if="step < 3" class="mx-2 h-0.5 w-12" :class="currentStep > step ? 'bg-primary' : 'bg-gray-200'" />
          </div>
        </NSpace>
      </div>

      <EmailStep v-if="currentStep === 1" :initial-email="email" @next="handleEmailVerified" />
      <CodeStep v-if="currentStep === 2" :email="email" @next="handleCodeVerified" @resend="handleResendCode" />
      <PasswordStep v-if="currentStep === 3" :email="email" :code="verifyCode" @success="handleResetSuccess" />
    </NCard>
  </div>
</template>

<style scoped>
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-to));
}
</style>
